<template>
  <!-- 学员反馈 -->
  <section class="section_box5 scroll" data-index="5" id="5">
    <span class="big_title flexcc">学员反馈</span>
    <div class="conten_box container">
      <div class="first_case flexjs">
        <div class="vido_case flexjs">
          <div class="ioc_MP4 play_MP4" data-src="mp4/interview1.mp4"></div>
          <div
            class="ioc_MP4 play_MP4 num1"
            data-src="mp4/interview2.mp4"
          ></div>
        </div>
        <div class="feedback">
          <span class="symbol"></span>
          <p class="textControl4">
            这次上课受益匪浅,只有亲自体会过了才能真正感觉到这个技成在工控这方面做的还是非常棒的。有些东西需要切身的去体会、去感受；没来之前,觉得自己技术也蛮好啊,搞过比赛,学过这学过那,想着学个模块就出去做项目,但是直到今天为止,我才知道需要学习的还很多。
          </p>
          <b class="user_ico flexcc">李工</b>
          <span>小型自动化工程师训练营学员</span>
        </div>
        <div class="feedback">
          <span class="symbol"></span>
          <p class="textControl4">
            拓宽了眼界,我自己个人感觉技成真的是带领我走进工控行业,真的是领我进来的，以前没觉得培训怎么样,可能都是混日子吧...这次来了之后,感觉特别好!我会继续学!
          </p>
          <b class="user_ico num1 flexcc">王工</b>
          <span>ABB工业机器人训练营学员</span>
        </div>
        <div class="feedback">
          <span class="symbol"></span>
          <p class="textControl4">
            老师的讲课逻辑清晰,比较容易理解,还蛮有耐心的,设备都非常先进,工作中接触的也是西门子设备,感觉特别好,如果课堂能拍摄成小视频就好了,回去还可以再好好回顾一下。以后要是有时间,还是蛮想过来学习其他模块的。
          </p>
          <b class="user_ico num2 flexcc">谢工</b>
          <span>全集成自动化工程师训练营学员</span>
        </div>
        <div class="feedback">
          <span class="symbol"></span>
          <p class="textControl4">
            老师的教学能力还是挺不错的,在教学方面负责的任何问题都能很快的解答,而且我看的出老师的职业素养非常好。这次在上课前有特意看视频先学习,所以感觉特别有收获!感谢!
          </p>
          <b class="user_ico num3 flexcc">罗工</b>
          <span>21天自动化工程师训练营学员</span>
        </div>
        <div class="feedback">
          <span class="symbol"></span>
          <p class="textControl4">
            这次过来学习后,运用没什么问题了,主要是自己的编程思维还有待提高。老师的讲课很细致专业,给了我很多启发,帮助特别大。
          </p>
          <b class="user_ico num4 flexcc">张工</b>
          <span>小型自动化工程师训练营学员</span>
        </div>
      </div>
      <!-- 最新文章 -->
      <div class="article-list">
        <h2>最新文章</h2>
        <div class="act-case flexjs">
          <div class="right-case evenList">
            <div
              class="item flexjs"
              v-for="(item, index) in weixinModel"
              :key="index"
            >
              <a
                class="title textControl flexcc"
                :href="item.url"
                target="_blank"
                >{{item.title}}</a
              >
              <span class="time">{{item.date}} </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 学员合影 -->
      <div class="photo-list">
        <!-- Swiper -->
        <swiper
          class="student-photo"
          v-bind:options="swiperThree"
          ref="mySwiper"
          v-if="address.length"
        >
          <swiper-slide
            class="swiper-slide"
            v-for="(item, index) in address"
            v-bind:key="index"
          >
            <img :src="item" class="swiper-lazy" />
          </swiper-slide>
        </swiper>
        <!-- Navigation -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <p class="photo-hint">训练营学员合影集锦</p>
      </div>
    </div>
  </section>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
export default {
  name: 'section-box5',
  data() {
    return {
      swiperThree: {
        loop: true,
        loopedSlides: 2,
        initialSlide: '0',
        effect: "coverflow", //默认就是slide位移,fade淡入淡出,cube3d方块,coverflow 3d流
        slidesPerView: 2, //可视化展示图片
        centeredSlides: true,
        spaceBetween: '-50%',
        autoplay: {
          delay: 3000, //自动播放速度
          disableOnInteraction: false //鼠标移上去时是否还继续播放
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        coverflowEffect: {
          rotate: 0,
          stretch: 20,
          depth: 180,
          modifier: 4,
          slideShadows: false,
        },
      },
    }
  },
  components: {
    swiper,
    swiperSlide,
  },
  // 接受父组件的值
  props: ["address", "weixinModel"],
  mounted() {
  },
  methods: {
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
}
</script>

<style lang="scss">
@import "./../assets/scss/base.scss";
@import "./../assets/scss/mixin.scss";
.section_box5 {
  padding-top: 48px;
  padding-bottom: 90px;
  background: #f6faff;

  .conten_box {
    margin-top: 48px;

    .first_case {
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;

      .vido_case {
        width: 384px;

        .ioc_MP4 {
          position: relative;
          width: 188px;
          height: 200px;
          background: url(/imgs/feedback_bg1.png) no-repeat;
          background-size: auto 100%;
          border-radius: 12px;
          cursor: pointer;
        }

        > .num1 {
          background: url(/imgs/feedback_bg2.png) no-repeat;
          background-size: auto 100%;
        }

        .ioc_MP4::before {
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-left: 28px solid #fff;
          border-top: 16px solid transparent;
          border-bottom: 16px solid transparent;
        }
      }

      .feedback {
        width: 384px;
        height: 200px;
        padding: 16px 20px;
        background: #ffffff;
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04),
          0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        text-align: left;
        transition: transform 0.3s;

        .symbol {
          width: 26px;
          height: 24px;
          background: url(/imgs/ico_symbol.png) no-repeat;
          background-size: auto 100%;
        }

        p {
          width: 100%;
          // height: 98px;
          min-height: 98px;
          font-size: 14px;
          line-height: 175%;
          text-align: justify;
          letter-spacing: 0.25px;
          color: #28293d;
        }

        .user_ico {
          justify-content: flex-end;
        }

        .user_ico::before {
          content: "";
          width: 18px;
          height: 18px;
          margin-right: 3px;
          background: url(/imgs/user_ico1.png) no-repeat;
          background-size: auto 100%;
        }

        .num1::before {
          background: url(/imgs/user_ico2.png) no-repeat;
          background-size: auto 100%;
        }

        .num2::before {
          background: url(/imgs/user_ico3.png) no-repeat;
          background-size: auto 100%;
        }

        .num3::before {
          background: url(/imgs/user_ico4.png) no-repeat;
          background-size: auto 100%;
        }

        .num4::before {
          background: url(/imgs/user_ico5.png) no-repeat;
          background-size: auto 100%;
        }

        span {
          width: 100%;
          height: 16px;
          font-size: 12px;
          line-height: 16px;
          color: #8f90a6;
          text-align: right;
        }
      }

      .feedback:nth-of-type(n + 4) {
        margin-top: 20px;
      }

      .feedback {
        height: auto;

        .textControl4 {
          height: 120px;
          -webkit-line-clamp: 5;
        }
      }
    }

    .article-list {
      margin-top: 50px;
      width: 1200px;
      padding: 24px;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.04),
        0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.04);

      & h2 {
        height: 26px;
        font-family: OPPOSans-B;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0.25px;
        color: #1c1c28;
      }

      .act-case {
        margin-top: 12px;
        position: relative;

        & div {
          align-items: flex-start;
          width: 100%;

          .item {
            .title {
              justify-content: flex-start;
              width: 900px;
              height: 28px;
              font-family: OPPOSans-R;
              font-size: 16px;
              font-weight: normal;
              line-height: 28px;
              letter-spacing: 0.25px;
              color: #28293d;

              &:hover {
                color: #0063f7;
              }

              &::before {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 10px;
                background: #c7c9d9;
                flex: none;
              }
            }
          }
        }
      }
    }

    .photo-list {
      position: relative;
      padding: 48px 32px 0;
      width: 100%;

      .stack-up {
        padding-bottom: 30px;
      }

      .swiper-button-prev:after {
        content: " ";
      }

      .swiper-button-next:after {
        content: " ";
      }

      .swiper-button-prev {
        width: 64px;
        height: 64px;
        left: 0px;
        background: url(/imgs/prev.png) 0px center no-repeat;
        background-size: 100% 100%;
        z-index: 1;
      }

      .swiper-button-next {
        width: 64px;
        height: 64px;
        right: 0px;
        background: url(/imgs/next.png) 0px center no-repeat;
        background-size: 100% 100%;
        z-index: 1;
      }

      img {
        width: 100%;
        height: 550px;
        box-shadow: 0px 4px 8px rgba(58, 55, 54, 0.25),
          0px 12px 24px rgba(112, 110, 109, 0.5);
        border-radius: 20px;
      }

      .photo-hint {
        text-align: center;
        margin-top: 24px;
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0.25px;
        color: #28293d;
      }
    }
  }
}
</style>